<template>
  <a-card class='table-page-search-wrapper' :hoverable='true' size='small' :style='getCardStyle'>
    <a-form layout='inline' :form='form' :labelCol='{span:4}' style='margin-top: -5px'>
      <a-row :gutter='24' justify='start'>
        <slot v-bind='$attrs'></slot>
        <template v-if='advanced'>
          <slot name='advanced'></slot>
        </template>
        <a-col :md='!advanced && 6 || 3' :sm='24' v-if='showSearchBtn'>
          <span class='table-page-search-submitButtons' :style="advanced && { float: 'left', overflow: 'hidden' } || {} ">
            <a-button type='primary' ref='search' @click='searchHandler' v-if='showSbtn'>{{ showSbtnName }}</a-button>
            <a-button style='margin-left: 3px' @click='exportHandler' v-if='showExportBtn'>导出</a-button>
             <slot name='btn'></slot>
            <a-button style='margin-left: 3px' @click='resetForm' v-if='showRestBtn'>{{ resetBtnName }}</a-button>
            <a @click='toggleAdvanced' style='margin-left: 3px' v-if='more&&showMore'>
              {{ advanced ? "收起" : "更多" }}
              <a-icon :type="advanced ? 'up' : 'down'" />
            </a>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<script>

export default {
  name: "fSearchForm",
  provide() {
    return {
      queryParam: this.queryParam
    }
  },
  props: {
    formKey: {
      type: String,
      default: ""
    },
    globalParams: {
      type: Object,
      default: () => {
      }
    },
    tableId: {
      type: String,
      default: null
    },
    showSearchBtn: {
      type: Boolean,
      default: true
    },
    showExportBtn: {
      type: Boolean,
      default: false
    },
    exportUrl: {
      type: String,
      default: null
    },
    tableObj: {
      type: Object,
      default: null
    },
    more: {
      type: Boolean,
      default: true
    },
    showSbtn: {
      type: Boolean, // 是否显示查询按钮
      default: true
    },
    showSbtnName: {
      type: String, // 自定义查询按钮名称
      default: "查询"
    },
    showRestBtn: {
      type: Boolean, // 是否显示重置按钮
      default: true
    },
    resetBtnName: {
      type: String, // 自定义重置按钮名称
      default: "重置"
    },
    exportFunc: {
      type: Function,
      default: null
    },
    noResetValueKey: {
      type: String, // 点击重置按钮时，指定搜索框赋值不取消
      default: ""
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      // 高级搜索 展开/关闭
      advanced: false,
      showMore: true,
      queryParam: {},
      searchParams: {}
    }
  },
  methods: {
    searchHandler() {
      let searchParams = Object.assign({}, this.form.getFieldsValue(), this.queryParam, this.globalParams)
      this.searchParams = searchParams
      if (this.tableObj) {
        this.tableObj.refresh(true, searchParams)
      } else {
        this.$emit("searchHandler", searchParams)
      }
    },
    resetForm() {
      let value = ""
      if(this.noResetValueKey) {
        value = this.form.getFieldsValue()[this.noResetValueKey] || ""
      }
      this.form.resetFields()
      if (this.tableObj) {
        let searchParams = {...this.globalParams}
        if(this.noResetValueKey && value) {
          let obj = {}
          obj[this.noResetValueKey] = value
          this.setFieldsValue(obj)
          searchParams = Object.assign({}, obj, this.globalParams)
        }
        console.log('searchParams', searchParams)
        this.tableObj.reset(searchParams)
      } else {
        this.$bus.emit("resetSearchParams", {})
        this.$emit("resetHandler", {})
      }
    },
    setFieldsValue(fieldsValue) {
      this.form.setFieldsValue(fieldsValue)
    },
    /**
     * 导出事件
     */
    exportHandler() {
      //自定义导出事件
      if (this.exportFunc) {
        this.exportFunc()
      } else {
        if (this.tableObj) {
          this.tableObj.tableExport(this.exportUrl, this.searchParams)
        } else {
          this.$emit("exportHandler", this.exportUrl, this.searchParams)
        }
      }
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    }
  },
  computed: {
    getCardStyle() {
      return {
        height: !this.advanced ? "50px" : "auto",
        borderRadius: "5px",
        marginTop: "-5px"
      }
    }
  },
  mounted() {
    // 监听回车键
    document.addEventListener("keydown", event => {
      if (event.keyCode === 13) {
        event.preventDefault()
        event.stopPropagation()
        this.$refs.search.$el.click()
      }
    })
  },
  created() {
    if (!this.$slots["advanced"]) {
      this.showMore = false
    }
  }
}
</script>
